<%--
  Created by IntelliJ IDEA.
  User: Sky
  Date: 2019/4/10
  Time: 11:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${pageContext.request.contextPath}/images/fiveite.ico">

    <title>人流量检测系统</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/my_animation.css" type="text/css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/components.css" type="text/css"/>
    <link href="https://at.alicdn.com/t/font_1126822_bheq7e6ga8.css" rel="stylesheet">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" type="text/css"
          href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css"/>
    <style type="text/css">
        #mytable tr td {
            height: 40px;
            padding-top: 0;
            padding-bottom: 0;
            line-height: 40px;
            text-align: center;
        }
    </style>
</head>

<body>
<div class="modal fade" id="operateAcc" tabindex="-1" role="dialog" aria-labelledby="operateAcc" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="operateAccTitle">更换账号</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div id="operateAccBody" class="modal-body">
                <div class="row">
                    <div class="col-8">
                        <div class="accItem nowAcc" id="nowAcc"></div>
                        <div class="accItem addAcc" id="addAcc">
                            <div class="input-group addInput">
                                <div class="input-group-prepend">
                                    <span class="input-group-text iconfont">&#xe634;</span>
                                </div>
                                <input type="text" id="account" class="form-control" onblur="" placeholder="账号"
                                       aria-label="Username" aria-describedby="addon-wrapping">
                            </div>
                            <div class="input-group addInput">
                                <div class="input-group-prepend">
                                    <span class="input-group-text iconfont">&#xe63e;</span>
                                </div>
                                <input type="password" id="password" class="form-control" placeholder="密码"
                                       aria-label="Username" aria-describedby="addon-wrapping">
                            </div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="emptyCheckDiv"></div>
                        <div class="accCheck">没有该账号</div>
                        <div class="pwdCheck">密码错误</div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="universalBtn secondary" data-dismiss="modal">取消</button>
                <button type="button" id="change" class="universalBtn primary" disabled>确认更换</button>
            </div>
        </div>
    </div>
</div>
<div id="bg">
    <div id="lg_nav" class="lg_nav hidden-sm fixed-top colorBg">
        <div id="lg_nav_buttom">
            <a href="${pageContext.request.contextPath}/default" class="lg_nav_item">
                <p class="logo unAbleSelect"><i class="iconfont">&#xe630;</i> <span id="logo" class="logoico">人流量预警云平台</span></p>
            </a>
            <a href="${pageContext.request.contextPath}/realtime" class="lg_nav_item bk_hover">实时预警</a>
            <a href="${pageContext.request.contextPath}/history" class="lg_nav_item bk_hover">历史记录</a>
            <a href="${pageContext.request.contextPath}/admin/handler" id="admin" class="lg_nav_item bk_hover adminBtn hide">管理员<label class=""></label></a>
            <a class="lg_nav_item bk_hover bk_active">设置</a>
            <div id="headerFeild" class="lg_nav_item">
                <div class="headerTop head_hover bk_active">
                    <span id="nickname">正在加载</span>
                </div>
                <div class="accSet colorBg">
                    <ul>

                        <li id="changeAcc">更换账号</li>
                        <li><a href="${pageContext.request.contextPath}/login">退出账号</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="default_layout">
        <div class="grad interval"></div>
    </div>
</div>
<div class="m_layout locationSetting_layout">
    <div class="side_layout setting_side">
        <div class="sideFixedFeild unAbleSelect">
            <a href="${pageContext.request.contextPath}/setting"><div class="settingOption">地点设置</div></a>
            <a href="javascript:void(0)"><div class="settingOption optionActive">用户设置</div></a>
        </div>
    </div>
    <div class="main_layout usersetting_container">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">上传头像</span>
            </div>
            <div class="custom-file">
                <input value="" type="file" class="custom-file-input" id="getfile">
                <label id="filename" class="custom-file-label" for="getfile">选择文件</label>
            </div>
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">账号</span>
            </div>
            <input id="iaccount" type="text" readonly class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">账号名</span>
            </div>
            <input id="name" type="text" class="form-control accMdi" placeholder="账号名" aria-label="Username" aria-describedby="basic-addon1">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">真实姓名</span>
            </div>
            <input id="realname" type="text" class="form-control accMdi" placeholder="真实姓名" aria-label="Username" aria-describedby="basic-addon1">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">更改密码</span>
            </div>
            <input id="newpassword" type="text" class="form-control accMdi" placeholder="新密码" aria-label="Username" aria-describedby="basic-addon1">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">身份证号</span>
            </div>
            <input id="cardnum" type="text" class="form-control accMdi" placeholder="身份证号" aria-label="Username" aria-describedby="basic-addon1">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">账号身份</span>
            </div>
            <input id="identfier" readonly type="text" class="form-control accMdi" placeholder="身份" aria-label="Username" aria-describedby="basic-addon1">
        </div>
        <div class="input-group mb-3">
            <button id="submitMdi" type="button" class="universalBtn primary btnSize-lg">提交修改</button>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous" async></script>
<script type="text/javascript" charset="utf8"
        src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jQuery.md5.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery.cookie.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/public.js" type="text/javascript"></script>
<script type="text/javascript">
    SetLoading(true);
    $(document).ready(function () {
        let imgbase64="";
        let nickname="";
        let realname="";
        let password="";
        let cardnum="";
        cookiesAuth();
        (function () {
            $.liteAjax("${pageContext.request.contextPath}/api/pagecheck",{
                account:Cookies.get("acc")
            },function (data) {
                let remotetemp=data[0];
                if(data.length===0){
                    message("获取失败",2000,"alert-warning")
                }
                $("#iaccount").val(remotetemp.account);
                $("#name").val(remotetemp.name);
                $("#realname").val(remotetemp.realname);
                // $("#newpassword").val(remotetemp.password);
                $("#cardnum").val(remotetemp.cardnum);

                $("#identfier").val(remotetemp.identifier===0?"普通":"管理员");
                SetLoading(false);
            })
        })();
        $("#getfile").on("change",function () {
            let file = this.files[0];
            // 确认选择的文件是图片
            let imgsize=file.size/1024;
            if(imgsize>500){
                message("文件必须小于500K",1000,"alert-warning")
            }else {
                if (file.type.indexOf("image") === 0){
                    $("#filename").html(file.name);
                    let reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function(e) {
                        imgbase64 = this.result;
                    };
                }else {
                    message("请选择图片！",1000,"alert-danger")
                }
            }
        });
        $(".accMdi").on("blur",function () {
            nickname=$("#name").val();
            realname=$("#realname").val();
            password=$("#newpassword").val();
            cardnum=$("#cardnum").val();
        });
        $("#submitMdi").on("click",function () {
            if(password.length<5&&password.length!==0){
                alert("密码必须大于5位")
            }else if(confirm('确定提交吗')===true){
                console.log(password.length);
                console.log(Cookies.get("pw"));
                $.liteAjax("${pageContext.request.contextPath}/api/updataUser",{
                    account:Cookies.get("acc"),
                    password:password.length===0?Cookies.get("pw"):$.md5(password),
                    realname:realname,
                    cardnum:cardnum,
                    name:nickname,
                    img:imgbase64,
                    type:Cookies.get("sign")
                },function (data) {
                    if(data===1){
                        message("修改成功！",1000,"alert-success");
                        window.location.reload(false)
                    }else {
                        message("修改失败！",2000,"alert-warning")
                    }
                });
            }
        })
    });
</script>
</body>
</html>